<template>
    <div>  
        <el-descriptions>
            <!-- 自定义title -->
            <template #title >
                <div> {{info.name}} </div>
            </template> 
            
            <el-descriptions-item :label="'总量:' + info.size_total + info.size_unit">
                <div style="width:225px;display: flex;justify-content:space-between;fontSize:12px">
                    <span id="desc" >已用: {{parseValue(info.size_used)}}</span>
                    <span id="desc">可用: {{parseValue(info.size_free)+info.size_unit}}</span>
                </div>
                <el-progress :percentage="info.size_per" :stroke-width="12" :show-text="false" ></el-progress>
                <div style="width:225px;display: flex;justify-content:space-between;margin:5px 0;">
                    <span id="desc">{{parseValue(info.size_per)}}%</span>
                </div>
            </el-descriptions-item>
        </el-descriptions>
    </div>
</template>

<script>
export default {
    //列表数据 
    props: {
        info:{
            type:Object,
            default:()=>{
                return {}
            }
        },
        options:{
            type:Array,
            default:()=>{
                return []
            }
        },
        title:{
            type:Boolean,
            default:true
        },
        exhibition:{
            type:Boolean,
            default:false
        }
    },
    methods:{

        parseValue(value){
            // this.info.size_free  有可能是 78.7999999 这种样子，要转变为  78.80
            value = parseFloat(value)
            value = value * 100  //  7879.9999
            value = Math.round(value)  // 4舍5入
            value = value +''    
            let per =  value.substring(0,value.length-2) //   后二位之前
            let last =  value.substring(value.length-2) //   后二位

            return per+"."+last

        }


    }        
}
</script>

<style lang="less" scoped>
/deep/.el-descriptions-row{
    width: 460px;
}
/deep/.el-descriptions-item__content{
    width: 280px;
    font-size: 12px;
}
/deep/.el-descriptions__header{
  margin-bottom: -30px;
}
/deep/.el-descriptions__title{
    font-weight: normal;
}
/deep/.el-descriptions{
    width: 450px;
}
/deep/.el-descriptions :not(.is-bordered) td{
  padding-bottom: 0px;
  margin-top: 0px !important;
}
.tooltip:hover{
    cursor: pointer;
}
.contentStyle{
    display: inline-block;
    width: 150px;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow:ellipsis;
    text-align: end;
    vertical-align:bottom;
}
</style>